<template>
	<view>
		<nav-bar isWhite :bgColor="['#3350D9','#1152FC']" fontColor="#FFF" title="登录验证"></nav-bar>
		<view class="login-container">
			<view class="login">
				<view class="login-item">
					<view class="login-input">
						<view class="icon1">
							<image src="../../static/icon/s.png"></image>
						</view>
						<input type="number" v-model="loginForm.mobile" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="login-item">
					<view class="login-input">
						<view class="icon2">
							<image src="../../static/icon/y.png" mode=""></image>
						</view>
						<input class="code-input" v-model="loginForm.code" type="number" placeholder="请输入验证码" />
						<view v-if="verifyShow" class="code" @click="getVerifyCode">获取验证码</view>
						<view v-else class="verify">{{verifyTip+'秒后重新获取'}}</view>
					</view>
				</view>
			</view>
			<button class="login-btn" @click="login">登录</button>
			<!-- <view class="argee">点击进入则表示您同意<text @click="goAgreement">《用户协议》</text></view> -->
			<view class="argee">
				<radio color="#3350D9" value="agreementSelected" :checked="agreement" @click="radioClick"></radio>
				我已阅读并同意<text @click="goAgreement">《用户协议》</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					// mobile: '13426664955',
					// code: 'ABC@123',
					mobile: '',
					code: ''
				},
				verifyShow: true,
				verifyTip: 59,
				authkey: undefined,
				agreement: false
			}
		},
		onLoad() {
			this.authkey = uni.getStorageSync('authkey')
		},
		methods: {
			radioClick() {
				this.agreement = !this.agreement;
			},
			goAgreement() {
				uni.navigateTo({
					url: '../userAgreement/userAgreement'
				})
			},
			// 获取验证码
			getVerifyCode() {
				console.log(this.loginForm)
				if (!this.$funcs.isCorrectMobile(this.loginForm.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else {
					this.$http2.post('auth/mobile/getcode', {
						mobile: this.loginForm.mobile
					}).then(res => {
						console.log(res)
					})
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					})
					this.timedown(59)
				}
			},
			timedown(num) {
				let that = this;
				if (num == 0) {
					that.verifyShow = true; // 是否显示获取验证码
					that.verifyTip = 59
					return clearTimeout();
				} else {
					that.verifyShow = false; // 是否显示获取验证码
					setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
			// 登录
			login() {
				if (!this.$funcs.isCorrectMobile(this.loginForm.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				} else if (this.loginForm.code.trim() === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else if(this.agreement === false) {
					uni.showToast({
						title: '请勾选同意下方的用户协议',
						icon: 'none'
					})
				}else {
					this.verifyCode()
				}
			},
			verifyCode() {
				this.authkey = uni.getStorageSync('authkey')
				this.$http2.post('auth/mobile/verifycode', {
					mobile: this.loginForm.mobile,
					code: this.loginForm.code, 
					authkey: this.authkey || 0,
					authType: 1, //业主
					groupId: uni.getStorageSync('groupId')
				}).then(res => {
					console.log(res)
					if (res.code == 10000) {
						this.getUserInfo()
					} else {
						uni.showToast({
							title: '未知错误',
							icon: 'none'
						})
					}
				})
			},
			getUserInfo() {
				this.$http.post('common/user/info').then(res => {
					if(res.code === 10000){
						uni.switchTab({
							url: '../index/index'
						})
						// uni.navigateTo({
						// 	url: '../my/my'
						// })
					}
					if (res.code === 50013) {
						uni.showModal({
							title: '提示',
							content: '您还没有注册,请前往注册',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '../register/register'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} 
					 if (res.code === 50014) {
						uni.setStorageSync('userInfo',res.data)
						uni.setStorageSync('projId',res.data.projId)
						uni.showModal({
							title: '提示',
							content: '您的信息正在审核中,请耐心等待',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '../my/my'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100vw;
		// height: 100vh;
		// background: url(../../static/icon/loginBg.png);
		background-size: 100% 100%;

		.login {
			position: absolute;
			width: 651rpx;
			height: 240rpx;
			left: 51rpx;
			top: 260rpx;

			.login-item {
				width: 651rpx;
				height: 50%;
				border-bottom: 1rpx solid #E5E5E5;
				display: flex;
				align-items: center;

				.login-input {
					width: 100%;
					height: 80%;
					z-index: 99;
					display: flex;
					font-size: 28rpx;
					align-items: center;

					.code {
						color: #3350D9;
						// color: #7DAFFF;
						font-size: 24rpx;
					}

					.verify {
						width: 200rpx;
						color: #7DAFFF;
						font-size: 24rpx;
					}

					input {
						width: 590rpx;
					}

					.code-input {
						width: 454rpx;
					}
				}
			}
		}

		.icon1 {
			width: 32rpx;
			height: 32rpx;
			margin-right: 29rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.icon2 {
			width: 32rpx;
			height: 32rpx;
			margin-right: 29rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.login-btn {
			width: 560rpx;
			height: 82rpx;
			border-radius: 41rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 82rpx;
			position: absolute;
			left: 95rpx;
			top: 598rpx;
			background: linear-gradient(to right, #3350D9, #1152FC);
		}

		.argee {
			position: absolute;
			left: 190rpx;
			top: 710rpx;
			color: #BBBBBB;
			font-size: 28rpx;
			radio {
				position: relative;
				top: -4rpx;
				transform:scale(0.9)
			}
			text {
				color: #3350D9;
			}
		}
	}
</style>
